<template>
  <div class="innerWrapper">
    <BreadCrumb />
    <div style="height:2vh;"></div>
    <el-tabs v-model="actived" @tab-click="handleTabsClick">
      <el-tab-pane label="工业APP" name="1"></el-tab-pane>
      <el-tab-pane label="工业微服务" name="2"></el-tab-pane>
      <el-tab-pane label="工业机理模型" name="3"></el-tab-pane>
    </el-tabs>
    <div class="tableWrapper">
      <el-table :data="pageData" style="width: 100%" stripe>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="nickname" label="发布人" width="180"></el-table-column>
        <el-table-column prop="createDate" width="180" label="发布时间"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="viewDetail(scope.row)" type="text" size="small">查看</el-button>
<!--            <el-button @click="viewDetail(scope.row)" type="text" size="small">取消订阅</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagnationWrapper">
      <el-pagination
        style="text-align:center;margin-top:15px;"
        background
        layout="prev, pager, next"
        :total="pagnation.total"
        :page-size="pagnation.pageSize"
        :current-page.sync="pagnation.pageNum"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb'
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      actived: '1'
    }
  },
  computed: {
    ...mapState({
      pagnation: (state) => state.subscribes.pagnation,
      pageData: (state) => state.subscribes.pageData,
      tableTab: (state) => state.subscribes.tableTab,
      currentTab: (state) => state.home.currentTab
    })
  },
  watch: {
    tableTab(v) {
      this.$store.commit('subscribes/setCurrentTabBackup', v)
      this.getList()
    }
  },
  created() {
    this.$store.commit('subscribes/setTableTab', '1')
    this.$store.commit('home/setCurrenttab', '')
    sessionStorage.removeItem('currentTab')
    this.actived = this.tableTab
    this.getList()
  },
  methods: {
    ...mapActions({
      pageChange: 'subscribes/getList',
      getList: 'subscribes/getList'
    }),
    viewDetail(row) {
      this.$store.commit('detail/setDetailType', this.actived === 3 ? 1 : this.actived)
      this.$router.push({
        path: '/main/detail',
        query: { id: row.id, type: this.actived === 3 ? 1 : this.actived }
      })
    },
    handleTabsClick(e) {
      this.$store.commit('subscribes/setTableTab', e.name)
    }
  },
  components: {
    BreadCrumb
  }
}
</script>
<style lang="scss" scoped>
.innerWrapper {
  width: 78vw;
  margin: 0 auto;
  .tableWrapper {
    /*height: 640px;*/
  }
}
</style>
